<template>
	<div class="wrap">
		<el-row>
			<el-col :span="2">
				<div class="grid-content cursorPoiner back">
					<i class="el-icon-back"></i>
					返回
				</div>
			</el-col>
		</el-row>
		<el-row>
			<el-col :span="3">
				<div class="grid-content finaceCheck-title-left">
					财务质检
				</div>
			</el-col>
			<el-col :span="3" :offset='18'>
				<div class="finaceCheck-title-twoBox">
					<div class="finaceCheck-title-middle cursorPoiner">
						财务切表
					</div>
					<div class="finaceCheck-title-right cursorPoiner">
						切换文件
					</div>
				</div>
			</el-col>
		</el-row>
		<el-row>
			<div class="mode mode2">
				<el-col :span="2">
					<div class="grid-content file-name">
						文件名称：
					</div>
				</el-col>
				<el-col :span="3">
					<div class="grid-content file-name-detail">
						犀语科技申报表
					</div>
				</el-col>
				<el-col :span="2" v-show="tittleData.textMiddleShow">
					<div class="grid-content file-name">
						债券类型：
					</div>
				</el-col>
				<el-col :span="3" v-show="tittleData.textMiddleShow">
					<div class="grid-content file-name-detail">
						上主板
					</div>
				</el-col>
				<el-col :span="2" v-show="tittleData.textMiddleShow">
					<div class="grid-content file-name">
						发行人类型：
					</div>
				</el-col>
				<el-col :span="3" v-show="tittleData.textMiddleShow">
					<div class="grid-content file-name-detail">
						一般企业
					</div>
				</el-col>
				<el-col :span="2" :offset='tittleData.offset'>
					<div class="grid-content file-name">
						共检查：
					</div>
				</el-col>
				<el-col :span="3">
					<div class="grid-content file-name-detail">
						306项
					</div>
				</el-col>
				<el-col :span="2">
					<div class="grid-content blue-font cursorPoiner" style="text-align: right;" v-show="tittleData.textRightShow">
						生成报告
					</div>
				</el-col>
				<el-col :span="2">
					<div class="grid-content blue-font cursorPoiner" v-show="tittleData.textRightShow">
						刷新结果
					</div>
				</el-col>
			</div>
		</el-row>
		<el-row>
			<div class="mode mode4">
				<el-row>
					<el-col :span="3">
						<div class="mode4-title mode4-left">
							校验具体指
						</div>
					</el-col>
					<el-col :span="1.5" :offset='16'>
						<div class="mode4-title mode4-norm">
							· 标准问题
						</div>
					</el-col>
					<el-col :span="1.5">
						<div class="mode4-title mode4-table">
							· 表内勾稽
						</div>
					</el-col>
					<el-col :span="1">
						<div class="mode4-title blue-font mode4-deal cursorPoiner">
							处理
						</div>
					</el-col>
					<el-col :span="1">
						<div class="mode4-title blue-font mode4-ignore cursorPoiner">
							忽略
						</div>
					</el-col>
				</el-row>
				<el-row class="relation">
					<el-col>
						勾稽关系：其他应收账款
						≠ 应收款明细小项
					</el-col>
				</el-row>
				<el-row style="margin-top:10px">
					<el-col class="mode4-list">
						1. 2017年6月末公司
						<span class="mode4-red">其他应收账款</span>账面余额为
						<span class="mode4-red">974.67</span>，金额较小主要为支付本次申请发行上市聘的中介机构产生付费，押金和备筹。
					</el-col>
					<el-col class="mode4-list">
						1. 2017年6月末公司
						<span class="mode4-red">其他应收账款</span>账面余额为
						<span class="mode4-red">974.67</span>，金额较小主要为支付本次申请发行上市聘的中介机构产生付费，押金和备筹。
					</el-col>
					<el-col class="mode4-list">
						1. 2017年6月末公司
						<span class="mode4-red">其他应收账款</span>账面余额为
						<span class="mode4-red">974.67</span>，金额较小主要为支付本次申请发行上市聘的中介机构产生付费，押金和备筹。
					</el-col>
				</el-row>

				<el-row>
					<shouldCredit :tableData='this.tableData' @changeMoney='changeMoney'></shouldCredit>
				</el-row>
			</div>
		</el-row>
		<el-row>
			<div class="mode mode5">
				<el-row>
					<el-col :span="3">
						<div class="mode4-title mode4-left">
							应收账款
						</div>
					</el-col>
					<el-col :span="1.5" :offset='16'>
						<div class="mode4-title mode4-norm">
							· 标准问题
						</div>
					</el-col>
					<el-col :span="1.5">
						<div class="mode4-title mode4-table">
							· 表内勾稽
						</div>
					</el-col>
					<el-col :span="1">
						<div class="mode4-title blue-font mode4-deal cursorPoiner">
							处理
						</div>
					</el-col>
					<el-col :span="1">
						<div class="mode4-title blue-font mode4-ignore cursorPoiner">
							忽略
						</div>
					</el-col>
				</el-row>
				<el-row class="relation">
					<el-col>
						勾稽关系：其他应收账款 ≠应收款明细小项
					</el-col>
				</el-row>
			</div>
		</el-row>
		<dilog :is-show="isShowErrDialog" @on-close="hideErrDialog">
			<!-- 插槽传进入的内容 -->
			<el-row class="shadow-box">
				<div class="x-top">
					<div class="x-box">
						<p class="dialog-close" @click="hideErrDialog">x</p>
					</div>
					<div class="change-data-content">
						更新数据内容
					</div>
					<div class="x-common-row">
						<div class="x-left">指标名称</div>
						<div class="x-middle">两年以上</div>
						<div class="x-right"></div>
					</div>
					<div class="x-common-row">
						<div class="x-left">报告期</div>
						<div class="x-middle">2017-12-31</div>
						<div class="x-right"></div>
					</div>
					<div class="x-common-row">
						<div class="x-left">原值</div>
						<div class="x-middle">
							<span class="x-blue">{{changeTable.tableLastData.money}}</span>
						</div>
						<div class="x-right">（单位：万元）</div>
					</div>
					<div class="x-common-row">
						<div class="x-left">修改值</div>
						<div class="x-middle">
							<input v-model="changeTable.dislogNewMoney" type="text" value="" placeholder="请输入修改值" />
						</div>
						<div class="x-right">（单位：万元）</div>
					</div>
				</div>
				<div class="x-bottom">
					<div class="x-button" @click="updateTableData">提交</div>
				</div>
			</el-row>
		</dilog>
	</div>
</template>

<script>
import dilog from '../component/dialog.vue'
import shouldCredit from '../component/shouldCredit.vue'
export default {
  name: 'finaceCheck',
  components: {
    shouldCredit,
    dilog
  },
  data () {
    return {
      tittleData: {
        textMiddleShow: true,
        offset: 0, // 当textMiddleShow为false时，offset 为10
        textRightShow: true
      },
      changeTable: {
        tableLastData: '',
        dislogNewMoney: ''
      },
      isShowErrDialog: false,
      tableData: [{
        project: '一年至两年（单位万元）',
        money: '186.78',
        lastMoney: '——'
      }, {
        project: '两年以上（单位万元）',
        money: '67.49',
        lastMoney: '——'
      }, {
        project: '其他应收账款（单位万元）',
        money: '935.52',
        lastMoney: '——'
      }]
    }
  },
  methods: {
    hideErrDialog () {
      this.isShowErrDialog = false
      this.changeTable.dislogNewMoney = ''
    },
    updateTableData () {
      this.isShowErrDialog = false
      if (this.changeTable.dislogNewMoney) {
        this.changeTable.tableLastData.money = this.changeTable.dislogNewMoney
        this.changeTable.dislogNewMoney = ''
      }
    },
    changeMoney (value, index) {
      this.changeTable.tableLastData = value
      this.isShowErrDialog = true
    }
  }
}
</script>

<style lang="scss" scoped="" type="text/css">
	.back {
		height: 30px;
		line-height: 30px;
		font-size: 12px;
		width: 100%;
		text-align: left;
		margin-bottom: 0;
	}

	.el-icon-back {
		color: #108ee9;
	}

	.finaceCheck-title {
		width: 100%;
	}

	.finaceCheck-title-left {
		height: 36px;
		line-height: 36px;
		font-family: PingFangSC-Medium;
		font-size: 21px;
		color: #0F212E;
		text-align: left;
	}

	.finaceCheck-title-twoBox {
		display: flex;
	}

	.finaceCheck-title-middle {
		font-family: PingFangSC-Regular;
		font-size: 14px;
		color: #2db7f5;
		text-align: center;
		line-height: 21px;
		min-width: 70px;
	}

	.finaceCheck-title-right {
		font-family: PingFangSC-Regular;
		font-size: 14px;
		color: #2db7f5;
		text-align: center;
		line-height: 21px;
		min-width: 70px;
	}

	.mode {
		background-color: #fff;
	}

	.mode2 {
		height: 50px;
		margin-bottom: 16px;
	}

	.mode3 {
		height: 123px;
	}

	.blue-font {
		font-family: PingFangSC-Regular;
		font-size: 12px;
		color: #108ee9;
		text-align: center;
	}

	.file-name {
		font-family: PingFangSC-Medium;
		font-size: 14px;
		color: #0f212e;
		text-align: right;
		font-weight: bold;
	}

	.file-name-detail {
		font-family: PingFangSC-Regular;
		font-size: 12px;
		color: #0f212e;
		text-align: left;
	}

	.mode4 {
		padding: 10px 15px;
		margin-bottom: 15px;
	}

	.mode5 {
		height: 62px;
		padding: 10px 15px;
		margin-bottom: 15px;
	}

	.mode4-title {
		height: 30px;
		line-height: 30px;
	}

	.relation {
		font-family: PingFangSC-Regular;
		font-size: 14px;
		color: #5A6872;
		height: 20px;
	}

	.relation span {
		background-color: red;
		color: white;
		display: inline-block;
		text-align: center;
		width: 15px;
		height: 15px;
	}

	.mode4-left {
		font-family: PingFangSC-Medium;
		font-size: 14px;
		color: #5A6872;
	}

	.mode4-deal,
	.mode4-ignore {
		font-family: PingFangSC-Regular;
		font-size: 14px;
		color: #108EE9;
		text-align: center;
	}

	.mode4-norm,
	.mode4-table {
		font-family: PingFangSC-Regular;
		font-size: 12px;
		color: #818181;
		text-align: left;
	}

	.mode4-list {
		font-size: 12px;
		height: 23px;
		line-height: 23px;
	}

	.mode4-red {
		color: red;
	}

	.shadow-box {
		width: 500px;
		height: 315px;
		border-top: 3px solid #3D70B2;
	}

	.x-box {
		display: flex;
		justify-content: flex-end;

		padding-top: 10px;
	}

	.x-top {
		padding-left: 46px;
	}

	.x-box p {
		cursor: pointer;
		margin-right: 16px;
	}

	.change-data-content {
		font-size: 12px;
		font-weight: bold;
		margin-top: 16px;
	}

	.x-common-row {
		display: flex;
		font-size: 14px;
		margin-top: 22px;
	}

	.x-left {
		flex: 1;
	}

	.x-middle {
		flex: 1;
	}

	.x-middle  input{
		width: 100%;
		outline:none;
		border:none;
	}

	.x-right {
		flex: 2;
	}

	.x-blue {
		background-color: #3D70B2;
		padding-left: 5px;
		padding-right: 5px;
		color: white;
	}

	.x-red {
		background-color: red;
		padding-left: 5px;
		padding-right: 5px;
		color: white;
	}

	.x-bottom {

		height: 88px;
		margin-top: 28px;
		background-color: #F0F3F6;
	}

	.x-button {
		display: block;
		width: 64px;
		height: 40px;
		text-align: center;
		line-height: 40px;
		background-color: #3D70B2;
		float: right;
		margin-top: 24px;
		margin-right: 48px;
		color: white;
		border-radius: 1px;
		font-size: 14px;
		cursor: pointer;
	}
</style>
